<template>
  <div>
    <h2 align="center">用户--可投资项目列表</h2>
    投资名称:<input type="text" v-model="showData.I_Name" />&nbsp;
    投资金额:<input type="text" v-model="showData.MinMoney" />-
    <input type="text" v-model="showData.MaxMoney" />&nbsp;
    <input type="button" @click="showlist" value="查询" class="btn btn-success">
    <table class="table table-bordered">
      <tr>
        <td><input type="checkbox"></td>
        <td>项目编号</td>
        <td>项目名称</td>
        <td>投资总金额</td>
        <td>已投资金额</td>
        <td>剩余额度</td>
        <td>投资人数</td>
        <td>操作</td>
      </tr>

      <tr v-for="item in list" :key="item.I_Id">
        <td><input type="checkbox"></td>
        <td>{{ item.I_Id }}</td>
        <td>{{ item.I_Name }}</td>
        <td>{{ item.I_Budget }}</td>
        <td>{{ item.I_Receive }}</td>
        <td>{{ item.I_Residue }}</td>
        <td>{{ item.I_Number}}</td>
        <td>
          <input type="button" value="投资" @click="AddInvest(item.I_Id)" class="btn btn-primary">
        </td>
      </tr>
    </table>
  </div>

  <div>
    <span>共:<b style="color: red;">{{ totalCount }}</b>条数据,每页:<b style="color: red;">{{ showData.pagesize }}</b>条数据,当前第:<b style="color: red;">{{ showData.pageindex }}</b>/<b style="color: red;">{{ totaPage }}</b>页</span>&nbsp;
    <input type="button" value="首页"   @click="GoPage('home')">&nbsp;
    <input type="button" value="上一页" @click="GoPage('prev')">&nbsp;
    <input type="button" value="下一页" @click="GoPage('next')">&nbsp;
    <input type="button" value="尾页"   @click="GoPage('end')">&nbsp;
    <input type="text" size="7" v-model="page"  >
    <input type="button" value="Go" @click="GoPage(page)" class="btn btn-primary" >&nbsp;
    <select @change="showlist" v-model="showData.pagesize">
      <option :value="item" v-for="item in arr" :key="item">
        每页{{ item }}条
      </option>
    </select>
  </div>
</template>

<script setup lang="ts">

import {reactive,toRefs,onMounted} from 'vue'

import axios from 'axios';

import {useRouter} from 'vue-router'

let router = useRouter()

//数据 
let data:any =reactive({
  list:[],
  showData:{
    I_Id:'',
    I_Name:'',
    I_Budget:'',
    pageindex:1,
    pagesize:3,
    MinMoney:'',
    MaxMoney:''
  },
  totalCount:0,
  totaPage:0,
  arr:[3,5,7],//改变页容量
  page:'' //跳转页
})

//解构
let {list,showData,totalCount,totaPage,arr,page} = toRefs(data)

//投资
const AddInvest = (I_Id:any)=>{
   router.push({
     path:'/main/userInvest',
     query:{
       I_Id:I_Id
     }
   })
}

//生命周期
//页面加载时
onMounted(()=>{
  //获取投资项目列表
  showlist()
})

//显示方法
const showlist = ()=>{
  axios({
    url:'/api/Invest/GetInvestList',
    method:'get',
    params:showData.value
  }).then(res=>{
    console.log(res)
    list.value=res.data.data
    totalCount.value=res.data.totalCount
    totaPage.value=res.data.totaPage
  }).catch(err=>{
    console.log(err)
  })
}

//上下页 首尾页
const GoPage = (str:any)=>{
  if(str=='prev'){      
    if(showData.value.pageindex<=1){
      showData.value.pageindex=1;
      return alert('已经是第一页了')
    }
    showData.value.pageindex--;
  }else if(str=='next'){   
    if(showData.value.pageindex>=totaPage.value){
      showData.value.pageindex=totaPage.value;
      return alert('已经是最后一页了')
    }
    showData.value.pageindex++;
  }else if(str=='home'){
    if(showData.value.pageindex==1){
      return alert('已经是首页了')
    }
    showData.value.pageindex=1;
  }else if(str=='end'){
    if(showData.value.pageindex==totaPage.value){
      return alert('已经是尾页了')
    }
    showData.value.pageindex=totaPage.value;
  }else {
    //跳转页
    if(page.value==""){
      return alert('输入的页码不能为空') 
    }
    if(isNaN(page.value)){
      return alert('页码只能为数字')
    }
    if(page.value<1 || page.value>totaPage.value){
      return alert('页码只能输入1-'+totaPage.value+'之间的数字')
      }
    showData.value.pageindex=page.value
  }
  showlist()
  //显示当前页的页码
  page.value= showData.value.pageindex
}

</script>

<style scoped>

</style>